<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="/includes/header.jsp"%>
<!DOCTYPE html>

<html>
<head>
<title><fmt:message key="title.short" /></title>
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/main.css"
	rel="stylesheet">
<link
	href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"
	rel="stylesheet">
<link
	href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css"
	rel="stylesheet">
</head>

<body>
	<%@include file="/includes/navbar.jsp"%>
	<c:set var="pgnumb" value="${param.pgnumb != null ? param.pgnumb : 0}"></c:set>
	<c:set var="pages" value="${topic.posts.size()/4}"></c:set>

	<div class="container">
		<div>
			<h2>${topic.title}</h2>

			<c:if test="${user != null}">
				<form action="${pageContext.request.contextPath}/post.jsp"
					method="get">
					<input class="btn btn-primary" type="submit"
						value="<fmt:message key="newpost"/>" /> <input type="hidden"
						name="topicId" value="${topic.id}" /> <input type="hidden"
						name="lang" value="${lang}" />
				</form>
			</c:if>
		</div>
		<hr />

		<table style="width: 100%;">
			<c:forEach var="post" begin="${pgnumb * 4}"
				end="${(pgnumb+1) * 4 - 1}" items="${topic.posts}">
				<tr style="vertical-align: top;">
					<td style="width: 15%;">
						<ul class="thumbnails">
							<li class="span2">
								<h3>
									<a href="#?userId=${post.poster.id}">${post.poster.loginName}</a>
								</h3> <span class="thumbnail"> <img
									src="http://icons.iconarchive.com/icons/rokey/the-blacy/96/grimace-icon.png"
									alt="user logo">
							</span>posts:${post.poster.postCount}
							</li>
						</ul>
					</td>

					<td>
						<div class="alert alert-success" style="width:85%;">
							<h3 style="color: gray;">${post.title}</h3>
							<label>modified: ${post.modifyDate.toString().split(" ")[0]}</label>
						</div>
						<div class="well" style="width:85%;">
							${post.content}
							<hr />
							<label>${post.poster.signature}</label>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2"><hr /></td>
				</tr>
			</c:forEach>
		</table>

		<c:if test="${pages > 1}">
			<div class="pagination pagination-centered">
				<ul>
					<li><a
						<c:if test="${pgnumb eq 0}">onclick="return false;"</c:if>
						href="${pageContext.request.contextPath}/topic.jsp?id=${topic.id}&lang=${lang}&pgnumb=${pgnumb-1}">«</a></li>
					<li class="active"><a href="#" onclick="return false;">${pgnumb + 1}</a></li>
					<li><a
						<c:if test="${pgnumb ge pages - 1}">onclick="return false;"</c:if>
						href="${pageContext.request.contextPath}/topic.jsp?id=${topic.id}&lang=${lang}&pgnumb=${pgnumb+1}">»</a></li>
				</ul>
			</div>
		</c:if>
	</div>

	<%@include file="/includes/footer.jsp"%>
</body>

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script
	src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script type="text/javascript"
	src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
</html>